<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>


<style>

.app{

    width: 100%;
    height: 500px;
    background-image: linear-gradient(90deg,  #0004ff 0%, #1ee94a 50%, #6f27b0 100%);
    background-size: 500%;
    background-position: 0 0;
    animation: xiehao 3s infinite linear alternate;


}


@keyframes xiehao {
            0% {
                background-position: 100% 0;
            }
            100% {
                background-position: 100%s 0;
            }
        }


</style>




</head>





<body>
    
<div class="app"></div>



</body>
</html>